<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openlayer</title>
    <!-- 加载弹窗样式 -->
    <link rel="stylesheet" type="text/css" href="css/OLPopup.css" >
    <script type='text/javascript' src='../../lib/jquery/3.6.0/jquery-3.6.0.min.js'></script>
    <!-- 4.6.5 -->
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <!-- 5.3.3 -->
    <!--<link rel="stylesheet" type="text/css" href="../../lib/openLayers/5.3.3/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/5.3.3/ol.js"></script>-->
    <!-- 6.5.0-->
    <!--<link rel="stylesheet" type="text/css" href="../../lib/openLayers/6.5.0/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/6.5.0/ol.js"></script>-->
    <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>
    <script type="text/javascript" src="../../js/InternetUtil.js"></script>
    <script type="text/javascript" src="../../js/DrawRadarRangeCircle.js"></script>
    <style>
        .map {
            height: 800px;
            width: 100%;
        }
    </style>
</head>
<body>

    <div>
        <label>绘制几何图形类型：&nbsp;</label>
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">多边形</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
            <option value="Box">长方形</option>
        </select>
    </div>
    <div id="map" class="map"></div>
    <div id="mouse-position"></div>

    <script type="text/javascript">
        // 读取json
        window.onload = function(){

            // 初始化地图，默认使用OSM地图
            const map = OpenLayersUtil.init("map");

            OpenLayersUtil.map.getView().setZoom(4.8)

            const trackData = [
                [120.1, 30.2, 45, "2024-07-17 10:00:00"],
                [121.2, 30.3, 90, "2024-07-17 10:01:00"],
                [122.3, 30.4, 135, "2024-07-17 10:02:00"],
                // ... more data points
            ];
            OpenLayersUtil.drawTrajectory(trackData,map);



            // 移除所有的图层
            // OpenLayersUtil.removeLayerAll();
            console.log("地图中心：",OpenLayersUtil.mercatorToWgs84(map.getView().getCenter()))
            // map.getView().Rotate().setRotation(20);
            // Rotate(20,OpenLayersUtil.mercatorToWgs84(map.getView().getCenter()));

            // 显示鼠标位置经纬度
            OpenLayersUtil.addMousePosition('mouse-position')
            OpenLayersUtil.addPointermove()
            // 开启点击图层弹出窗口事件
            OpenLayersUtil.popupOpen()

            // 添加json边界
            OpenLayersUtil.addJson("json/100000.geojson")
            OpenLayersUtil.addJson("json/120000.geojson")
            OpenLayersUtil.addJson("json/350000.geojson")

            // 添加 geoserver 图层数据
            OpenLayersUtil.addGeoserver("http://192.168.1.227:58686/geoserver/wms","rgyx:QJ_RADAR")
            OpenLayersUtil.addGeoserverByImage("http://192.168.1.227:58686/geoserver/wms","rgyx:city_region")

            // popupOpen(map)
            // 创建数据源
            var source = OpenLayersUtil.createSource();
            var layer = OpenLayersUtil.createLayer(source,'test');
            OpenLayersUtil.addLayer(layer);
            // 绘制文字，点，线，面，圆
            OpenLayersUtil.drawText(source,120, 36,'字');
            OpenLayersUtil.drawPoint(source,120.98,30.92,OpenLayersUtil.styles.image);
            const iconStyle = OpenLayersUtil.styles.image;
            OpenLayersUtil.setIconImageScale(iconStyle,3)
            OpenLayersUtil.drawPoint(source, 120.74, 30.58, iconStyle);
            OpenLayersUtil.drawLine(source,[
                [114.8, 29.8],
                [120.0, 30.0],
                [120.2, 29.8]
            ]);

            OpenLayersUtil.drawLine(source,[
                [117.97, 25.91],
                [119.52, 27.46]
            ]);
            OpenLayersUtil.drawLine(source,[
                [117.99, 26.91],
                [119.52, 27.46]
            ]);

            OpenLayersUtil.drawLine(source,[
                [109, 38.5],
                [114, 43.5]
            ]);

            OpenLayersUtil.drawPolygon(source,[[
                [117.8, 29.8],
                [120.2, 29.8],
                [120.0, 30.0],
                [119.8, 29.8]
            ]]);

            OpenLayersUtil.drawRound(source,120.0, 30.0, 0.1);
            OpenLayersUtil.drawRound(source,113.35, 21.0, 0.5);
            OpenLayersUtil.drawRound(source,127.0, 30.8, 0.5);

            // 绘制圆线
            var lineStr = OpenLayersUtil.computeCirclularLine(112,25,100000,30,280)
            OpenLayersUtil.drawLine(source,OpenLayersUtil.polygonStringToLine(lineStr));
            // 绘制圆面
            var polygonStr = OpenLayersUtil.computeCirclularLine(116,28,100000,30,280)
            OpenLayersUtil.drawPolygon(source,OpenLayersUtil.polygonStringToPolygon(polygonStr)
                ,OpenLayersUtil.styles.circle);
            var polygonStr2 = OpenLayersUtil.computeCirclularLine(116,26,100000,30,280)
            OpenLayersUtil.drawPolygon(source,OpenLayersUtil.polygonStringToPolygon(polygonStr2,116,26)
                ,OpenLayersUtil.styles.circle);
            // 计算面积
            console.log("计算面积：",OpenLayersUtil.getAreaBySphere(
                new ol.geom.Polygon(OpenLayersUtil.polygonStringToPolygon(polygonStr))));
            // 聚合
            var lon = 112.0,lat = 28.0, count = 10000,date = [];
            for(var i = 0; i < count; i++){
                date.push([lon + Math.random(), lat + Math.random()]);
            }
            OpenLayersUtil.addCluster(date);
            // 图片
            OpenLayersUtil.addImage('images/20201207000001_PHI.png'
                ,[117.24194917241628, 23.91831310592743, 121.83916194758372, 28.064464674072568],0.9);
            OpenLayersUtil.addImage('http://192.168.1.49:3205/qxyb_nmg/sldXml/image/hail_1_2016-06-12_20_3_3_20231124152224.png'
            // OpenLayersUtil.addImage('http://192.168.1.49:3205/qxyb_nmg/sldXml/image/hail_1_2016-06-12_20_3_3.png'
                ,[97,37,127,55],0.5);
                /*,[OpenLayersUtil.wgs84ToMercator([97,37])[0],
                    OpenLayersUtil.wgs84ToMercator([97,37])[1],
                    OpenLayersUtil.wgs84ToMercator([127,54])[0],
                    OpenLayersUtil.wgs84ToMercator([127,54])[1]],0.5);*/

            // 读取json文件数据
            FetchUtil.getRequest('json/point.json',function (json){
                // 点的样式
                let pointStyle = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 3,
                        fill: new ol.style.Fill({
                            color: '#ab13de'
                        })
                    }),
                });
                // 地图描点
                for (let pointArrayElement of json.pointArray) {
                    OpenLayersUtil.drawPoint(source,pointArrayElement[0],pointArrayElement[1],pointStyle);
                }
            })

            // 绘制图形
            // 绘制类型选择对象
            var typeSelect = document.getElementById('type');
            // 用户更改绘制类型触发的事件
            typeSelect.onchange = function(e){
                // 移除绘制图形控件
                OpenLayersUtil.removeInteraction();
                // 添加绘制图形控件
                OpenLayersUtil.addInteraction(typeSelect.value);
            };

            // 绘制范围圈
            var drawRadarRangeCircle = new DrawRadarRangeCircle({
                map: map,
                lon: 102.262967,
                lat: 27.873464,
                name: "drawRadarRangeCircle",
                width: 1,
                quadrantFeature: {
                    radius: 110,
                    angles: [90, 180, 270]
                },
                circles: [
                    {
                        radius: 110,
                        fx: 0,
                        angle: 360,
                        colorFill: 'rgba(217,102,102,0.25)',
                        colorCircle: '#C00000',
                        line: true
                    },
                    {
                        radius: 80,
                        fx: 0,
                        angle: 360,
                        colorFill: 'rgba(255,122,255,0.25)',
                        colorCircle: '#FF00FF',
                        line: true
                    },
                    {
                        radius: 50,
                        fx: 0,
                        angle: 360,
                        colorFill: 'rgba(149,255,185,0.25)',
                        colorCircle: '#66FF99',
                        line: true
                    },
                    {
                        radius: 20,
                        fx: 0,
                        angle: 360,
                        colorFill: 'rgba(255,192,0,0.25)',
                        colorCircle: '#FDC102',
                        line: true
                    },
                ],
                drawTexts: [
                    {lon: 118.8, lat: 27.3, text: '非作业区', font: 'bold 26px normal'},
                    {lon: 117.2, lat: 27.5, text: 'A2', font: 'bold 26px normal'},
                ]
            });

        }
    </script>

</body>
</html>